<template>
  <el-container>
    <el-aside width="220px">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :router="true">
        <div class="picture"><img class="logo" src="../assets/img/logo.png" alt=""></div>
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/book">
          <i class="el-icon-menu"></i>
          <span slot="title">图书管理</span>
        </el-menu-item>
        <el-menu-item index="/borrow">
          <i class="el-icon-document"></i>
          <span slot="title">借阅中心</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="el-icon-setting"></i>
          <span slot="title">用户中心</span>
        </el-menu-item>
        <el-menu-item index="/system">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container style="min-height: 100vh;">
      
      
      <!-- 系统设置模块 -->
      <div>
        <h1>系统设置</h1>
        <!-- 借阅规则设置子模块 -->
        <el-card>
          <template #header>
            <span>借阅规则设置</span>
          </template>
          <el-form :model="borrowRules" label-width="120px">
            <el-form-item label="借阅时长（天）">
              <el-input v-model="borrowRules.borrowDuration"></el-input>
            </el-form-item>
            <el-form-item label="续借次数">
              <el-input v-model="borrowRules.renewTimes"></el-input>
            </el-form-item>
            <el-form-item label="逾期罚款（元/天）">
              <el-input v-model="borrowRules.overdueFine"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="saveBorrowRules">保存规则</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 系统参数设置子模块 -->
        <el-card>
          <template #header>
            <span>系统参数设置</span>
          </template>
          <el-form :model="systemParams" label-width="120px">
            <el-form-item label="公告内容">
              <el-input type="textarea" v-model="systemParams.announcement"></el-input>
            </el-form-item>
            <el-form-item label="节假日设置">
              <el-date-picker
                v-model="systemParams.holidays"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="saveSystemParams">保存参数</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      currentTab: 0,
      tabs: [
        { title: '借阅' },
        { title: '归还' },
        { title: '续借' },
        { title: '预约' }
      ],
      // 借阅模块数据
      borrowBookId: '',
      borrowUserId: '',
      borrowMessage: '',
      // 归还模块数据
      returnBookId: '',
      returnUserId: '',
      returnMessage: '',
      // 续借模块数据
      renewBookId: '',
      renewUserId: '',
      renewMessage: '',
      // 预约模块数据
      reserveBookId: '',
      reserveUserId: '',
      reserveMessage: '',
      // 用户管理数据
      users: [],
      newUser: {
        name: '',
        email: '',
        permissions: 'user'
      },
      editedUser: {
        name: '',
        email: '',
        permissions: 'user'
      },
      selectedUserIndex: null,
      // 系统设置数据
      borrowRules: {
        borrowDuration: '',
        renewTimes: '',
        overdueFine: ''
      },
      systemParams: {
        announcement: '',
        holidays: []
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 借阅处理
    handleBorrow() {
      this.borrowMessage = `已为用户 ${this.borrowUserId} 借阅图书 ${this.borrowBookId}，请按时归还。`;
      // 实际应用中调用后端接口
    },
    // 归还处理
    handleReturn() {
      this.returnMessage = `用户 ${this.returnUserId} 已成功归还图书 ${this.returnBookId}，未逾期，无费用。`;
      // 实际应用中调用后端接口
    },
    // 续借处理
    handleRenew() {
      this.renewMessage = `用户 ${this.renewUserId} 续借图书 ${this.renewBookId} 申请已通过，借阅期限已更新。`;
      // 实际应用中调用后端接口
    },
    // 预约处理
    handleReserve() {
      this.reserveMessage = `用户 ${this.reserveUserId} 已成功预约图书 ${this.reserveBookId}，我们会按序通知您。`;
      // 实际应用中调用后端接口
    },
    // 单条录入用户信息
    addUser() {
      if (this.isEmailUnique(this.newUser.email)) {
        this.users.push({ ...this.newUser });
        this.newUser.name = '';
        this.newUser.email = '';
      } else {
        this.$message.error('邮箱已存在，请使用其他邮箱。');
      }
    },
    // 批量录入用户信息
    batchAddUsers() {
      // 这里简单模拟批量录入，实际应用中可以从文件或其他数据源获取数据
      const batchUsers = [
        { name: '批量用户1', email: 'batch1@example.com', permissions: 'user' },
        { name: '批量用户2', email: 'batch2@example.com', permissions: 'user' }
      ];
      batchUsers.forEach(user => {
        if (this.isEmailUnique(user.email)) {
          this.users.push(user);
        } else {
          this.$message.error(`邮箱 ${user.email} 已存在，跳过该用户。`);
        }
      });
    },
    // 检查邮箱是否唯一
    isEmailUnique(email) {
      return !this.users.some(user => user.email === email);
    },
    // 编辑用户信息
    editUser() {
      if (this.selectedUserIndex !== null) {
        const user = this.users[this.selectedUserIndex];
        user.name = this.editedUser.name;
        user.email = this.editedUser.email;
        // 记录操作日志，这里简单打印到控制台
        console.log(`用户 ${user.name} 的信息已修改。`);
        this.editedUser.name = '';
        this.editedUser.email = '';
        this.selectedUserIndex = null;
        this.$message.success('用户信息修改成功');
      }
    },
    // 删除用户信息
    deleteUser() {
      if (this.selectedUserIndex !== null) {
        // 处理用户相关事务，这里简单模拟
        console.log(`用户 ${this.users[this.selectedUserIndex].name} 的相关事务已处理。`);
        this.users.splice(this.selectedUserIndex, 1);
        this.selectedUserIndex = null;
        this.$message.success('用户信息删除成功');
      }
    },
    // 更新用户权限
    updatePermissions() {
      if (this.selectedUserIndex !== null) {
        const user = this.users[this.selectedUserIndex];
        user.permissions = this.editedUser.permissions;
        // 记录操作日志，这里简单打印到控制台
        console.log(`用户 ${user.name} 的权限已更新为 ${user.permissions}。`);
        this.editedUser.permissions = 'user';
        this.selectedUserIndex = null;
        this.$message.success('用户权限更新成功');
      }
    },
    // 保存借阅规则
    saveBorrowRules() {
      console.log('保存的借阅规则：', this.borrowRules);
      this.$message.success('借阅规则保存成功');
    },
    // 保存系统参数
    saveSystemParams() {
      console.log('保存的系统参数：', this.systemParams);
      this.$message.success('系统参数保存成功');
    }
  }
};
</script>

<style scoped>
@import '../assets/css/home.css';

#app {
  font-family: 'Segoe UI', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tabs button {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.tabs button.active {
  background: #42b983;
  color: white;
  font-weight: bold;
}

.content {
  text-align: left;
}

h2 {
  margin-bottom: 15px;
  color: #333;
}

.input-field {
  padding: 8px;
  margin: 8px 0;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.action-btn {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.action-btn:hover {
  background: #3eaf7c;
}

.message {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
}

.message.success {
  background: #dff0d8;
  color: #3c763d;
}

.message.error {
  background: #f2dede;
  color: #a94442;
}
</style>